<template>
  <div class="mk-details">
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item) in bannerLists">
          <img :src="item.banner_pic" alt>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="bread-nav">
      <div class="nav-box">
        <span>您的位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/knowledge' }">环保知识</el-breadcrumb-item>
          <el-breadcrumb-item>{{knowledgeDetails.knowledge_name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <h3 class="title">{{knowledgeDetails.knowledge_name}}</h3>
      <h4 class="sub-title">Knowledge</h4>
      <div v-html="knowledgeDetails.knowledge_desc" style="padding-bottom:100px"></div>
      <!-- <div class="pre-next">
        <div class="top">更多案例</div>
        <div class="bottom">
          <div class="item" v-for="(item) in 2">
            <div class="item-img">
              <img src="../assets/product.png" alt>
            </div>
            <h3>案例二</h3>
            <p>的历史法拉盛大幅拉升的分类拉士大夫看见拉萨解放了大家按时发了拉萨的房间拉萨的房价</p>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import getData from "../api/getInfo";

export default {
  data() {
    return {
      bannerLists: [],
      knowledge_id: this.$route.params.knowledge_id,
      knowledgeDetails: {}
    };
  },
  mounted() {
    let mySwiper = new Swiper(".swiper1", {
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      observer: true
    });
    this.getBanner();
    this.getKnowledgeDetails(this.knowledge_id);
  },
  methods: {
    //获取banner图
    getBanner() {
      getData
        .getBanner()
        .then(res => {
          let tempArr = [];
          res.data.forEach((val, index) => {
            if (val.type == 4) {
              val.banner_pic = `${getData.url}${val.banner_pic}`;
              tempArr.push(val);
            }
          });
          this.bannerLists = tempArr;
        })
        .catch(e => {
          console.log(e);
        });
    },
    //获取产品详情
    getKnowledgeDetails(knowledge_id) {
      getData
        .getKnowledgeDetails(knowledge_id)
        .then(res => {
          this.knowledgeDetails = res.data;
          // let tempArr = [];
          // res.data.forEach((val, index) => {
          //   if (val.type == 2) {
          //     val.banner_pic = `${getData.url}${val.banner_pic}`;
          //     tempArr.push(val);
          //   }
          // });
          // this.bannerLists = tempArr;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.swiper-container {
  height: 505px;
  width: 100%;
}
/deep/.bread-nav {
  width: 100%;
  height: 52px;
  background: #f6f6f6;
  .nav-box {
    width: 1200px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto;
    display: flex;
    span,
    a {
      font-size: 14px;
      color: #9d9d9d;
    }
    .current {
      color: #96ce54;
    }
    .el-breadcrumb {
      line-height: 52px;
    }
    .el-breadcrumb__inner {
      color: #96ce54;
    }
    .el-breadcrumb__inner.is-link {
      color: #9d9d9d;
      font-weight: normal;
    }
  }
}
.content {
  width: 1200px;
  //   padding-bottom: 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    // line-height: 50px !important;
  }
  .title {
    font-size: 36px;
    color: #323232;
    margin: 76px 0 6px 0;
  }
  .sub-title {
    font-size: 18px;
    color: #b8b7b7;
    margin-bottom: 70px;
  }
  // .pre-next {
  //   width: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   margin-bottom: 50px;
  //   .top {
  //     height: 30px;
  //     line-height: 30px;
  //     width: 100%;
  //     background: #fff;
  //     border-left: 4px solid #96ce54;
  //     padding-left: 10px;
  //     font-size: 16px;
  //     color: #323232;
  //     margin-bottom: 20px;
  //   }
  //   .bottom {
  //     width: 100%;
  //     display: flex;
  //     justify-content: space-between;
  //     .item {
  //       width: 575px;
  //       border-bottom: 2px solid #96ce54;
  //       padding-bottom: 10  px;
  //       .item-img {
  //         width: 575px;
  //         height: 252px;
  //         img {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //       h3 {
  //         font-size: 20px;
  //         margin: 20px 0 10px 0;
  //         font-weight: normal;
  //         color: #323232;
  //       }
  //       p {
  //         font-size: 18px;
  //         line-height: 27px;
  //         text-indent: 2em;
  //         color: #999999;
  //       }
  //     }
  //   }
  // }
  //   .info {
  //     width: 801px;
  //     height: 138px;
  //     display: flex;
  //     .info-item {
  //       width: 267px;
  //       height: 100%;
  //     }
  //     .info-item:nth-child(1) {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       justify-content: space-between;
  //       .icon {
  //         width: 62px;
  //         height: 62px;
  //         img {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //       .option {
  //         font-size: 16px;
  //         color: #323232;
  //       }
  //       .phone-num {
  //         font-size: 14px;
  //         color: #999999;
  //       }
  //     }
  //     .info-item:nth-child(2) {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       justify-content: space-between;
  //       .icon {
  //         width: 47px;
  //         height: 67px;
  //         img {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //       .option {
  //         font-size: 16px;
  //         color: #323232;
  //       }
  //       .phone-num {
  //         font-size: 14px;
  //         color: #999999;
  //       }
  //     }
  //     .info-item:nth-child(3) {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       justify-content: space-between;
  //       .icon {
  //         width: 52px;
  //         height: 52px;
  //         img {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //       .option {
  //         font-size: 16px;
  //         color: #323232;
  //       }
  //       .phone-num {
  //         font-size: 14px;
  //         color: #999999;
  //       }
  //     }
  //   }
  //   .map {
  //     width: 978px;
  //     height: 372px;
  //     margin-top: 70px;
  //   }
  //   .submit-content {
  //     display: flex;
  //     flex-direction: column;
  //     width: 978px;
  //     margin-top: 60px;
  //     .block {
  //       display: flex;
  //       justify-content: space-between;
  //       margin-bottom: 15px;
  //       .name,
  //       .phone {
  //         width: 478px;
  //         height: 56px;
  //         background-color: #ebebeb;
  //         border: none;
  //         outline: none;
  //         color: #757575;
  //         font-size: 18px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //       .catogory,
  //       .email {
  //         width: 478px;
  //         height: 56px;
  //         background-color: #ebebeb;
  //         border: none;
  //         outline: none;
  //         color: #757575;
  //         font-size: 18px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //       .catogory {
  //         option {
  //           background: #fff;
  //           height: 56px;
  //         }
  //       }
  //     }
  //     textarea {
  //       width: 978px;
  //       height: 324px;
  //       background-color: #ebebeb;
  //       border: none;
  //       outline: none;
  //       padding: 15px;
  //       box-sizing: border-box;
  //       color: #757575;
  //       font-size: 18px;
  //       font-family: Arial, Helvetica, sans-serif;
  //       resize: none;
  //     }
  //     .submit {
  //       width: 390px;
  //       height: 63px;
  //       background-color: #96ce54;
  //       border: none;
  //       margin-top: 15px;
  //       font-size: 20px;
  //       color: #fff;
  //     }
  //   }
}
</style>